<template>
  <!-- 创建圈子第一步 -->
  <view class="main">
    <view class="top">
      <view class="back" @click="handBack">
        <image src="../../imges/left.png" mode="aspectFill"></image>
        <text>创建圈子 · 类型</text>
      </view>
      <view class="title"> 请选择你要创建哪一类圈子 </view>
    </view>

    <view class="list">
      <!-- 内部交流圈 -->
      <navigator
        :url="'/pages/my_circle/found?type=' + item.sortCode"
        hover-class="none"
        v-for="(item, index) in categoryList"
        :key="index"
      >
        <view class="item">
          <view class="left" v-if="index == 0">
            <image :src="item.headPicture" mode="aspectFill"></image>
          </view>
          <view class="left left1" v-if="index == 1">
            <image :src="item.headPicture" mode="aspectFill"></image>
          </view>
          <view class="left left2" v-if="index == 2">
            <image :src="item.headPicture" mode="aspectFill"></image>
          </view>
          <view class="center">
            <view class="one">
              {{ item.dictTypeName }}
            </view>
            <view class="two">
              {{ item.dictName }}
            </view>
          </view>
          <view class="right">
            <image src="../../imges/you.png" mode="aspectFill"></image>
          </view>
        </view>
      </navigator>

      <!-- 社群交流圈 -->
      <!-- 			<navigator url="/pages/my_circle/found" hover-class="none">
				<view class="item">
					<view class="left left1">
						<image src="../../imges/set2.png" mode="aspectFill"></image>
					</view>
					<view class="center">
						<view class="one">
							社群运营圈
						</view>
						<view class="two">
							面向某个社群的成员的沟通交流圈子
						</view>
					</view>
					<view class="right">
						<image src="../../imges/you.png" mode="aspectFill"></image>
					</view>
				</view>
			</navigator> -->
      <!-- 商业交流圈 -->
      <!-- 			<navigator url="/pages/my_circle/found?index=3" hover-class="none">
				<view class="item">
					<view class="left left2">
						<image src="../../imges/set3.png" mode="aspectFill"></image>
					</view>
					<view class="center">
						<view class="one">
							商业交流圈
						</view>
						<view class="two two1">
							面向企业上下游，或某个行业领域的沟
							通交流、资源分享圈子
						</view>
					</view>
					<view class="right">
						<image src="../../imges/you.png" mode="aspectFill"></image>
					</view>
				</view>
			</navigator> -->
    </view>
  </view>
</template>
<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      categoryList: [],
    };
  },
  onLoad() {
    this.categoryListH();
  },
  methods: {
    categoryListH() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsByDictType",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            dictType: "FRIENDS_TYPE",
          },
        }).then((res) => {
          // console.log(res, '创建圈子')
          if (res.data.code == 200) {
            this.categoryList = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: rgba(248, 248, 250, 1);
}

.top {
  width: 750rpx;
  height: 390rpx;
  background-image: url();
  background-repeat: no-repeat;
  background-size: 750rpx 390rpx;
  position: relative;

  .back {
    position: absolute;
    top: 99rpx;
    left: 35rpx;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 12rpx;
      margin-top: 2rpx;
    }

    text {
      font-size: 36rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
  }

  .title {
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    left: 75rpx;
    bottom: 162rpx;
  }
}

.list {
  padding: 0 32rpx;

  .item {
    display: flex;
    width: 686rpx;
    height: 212rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    padding: 45rpx 0;
    box-sizing: border-box;
    position: relative;
    top: -106rpx;
    margin-bottom: 35rpx;

    .left {
      width: 122rpx;
      height: 122rpx;
      background: linear-gradient(
        132deg,
        rgba(32, 227, 105, 1) 0%,
        rgba(17, 186, 152, 1) 100%
      );
      box-shadow: 0rpx 4rpx 14rpx 0px rgba(27, 212, 123, 0.61);
      margin-left: 58rpx;
      margin-right: 38rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .left1 {
      background: linear-gradient(
        136deg,
        rgba(255, 243, 79, 1) 0%,
        rgba(255, 157, 79, 1) 100%
      );
    }

    .left2 {
      background: linear-gradient(
        318deg,
        rgba(21, 113, 235, 1) 0%,
        rgba(81, 166, 255, 1) 100%
      );
    }

    .center {
      flex: 1;
      width: 122rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .one {
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
      }

      .two {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
      }

      .two1 {
        margin-bottom: -16rpx;
      }
    }

    .right {
      width: 16rpx;
      height: 26rpx;
      margin-right: 22rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
